<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.green {
			width: 100px; height: 100px; background-color: green;
			float: left;    /* 设置为左侧 浮动 */
		}
		.red {
			width:200px; height: 150px; background-color: red;
		}
		.a {
			width: 200px ;background-color: green;
		}
		.b {
			width: 700px ;background-color: red;
		}
		.c {
			width: 300px ;background-color: blue;
		}
		.a,.b,.c{ height: 200px;  float: left;}
	</style>
	<body>
		<p>文字环绕效果</p>
		<div class="green"></div>
		<div class="red"> 文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
		<p>横向排版布局</p>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</body>
</html>
